<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 150px; width: 100%"></div>
		<div class="topKnow f f-a-c f-j-b m1280">
			<div class="myClu">My club</div>
			<!-- <div @click="router.push('/KnowClubAreateAClub')" class="creatr hand">+ Create a Club</div> -->
		</div>
		<div class="tabs f f-a-c m1280">
			<div :class="{ actice: ind == 1 }" @click="qiehuan(1)" class="hand articles">Club</div>
			<div :class="{ actice: ind == 2 }" @click="qiehuan(2)" class="hand club">Articles</div>
		</div>
		<div v-show="ind == 2" class="topFilter m1280 f f-a-c f-j-b">
			<div class="inpFilter f f-a-c">
				<div class="inpBoxs f f-a-c f-j-b">
					<input type="text" class="digtal" placeholder="Digital marketing" v-model="marking" name="" id="" />
					<img src="/src/assets/user/sousuo2.png" class="sousuo hand" alt="" />
				</div>
				<div @click="filterVisible = true" class="filters hand f f-a-c f-j-c">Filter <img src="/src/assets/user/list.png" alt="" /></div>
			</div>
			<!-- <div @click="addAct" class="add hand">+ Write an article</div> -->
		</div>
		<div v-show="ind == 1" class="results m1280">{{ total }} results</div>
		<div v-show="ind == 2" class="results m1280">This month</div>
		<div v-if="ind == 1" class="Box m1280">
			<div v-for="(item, index) in list" :key="index" class="itemBox f f-a-c">
				<div class="leftItem f">
					<div class="club">
						<div class="title">Club name</div>
						<div class="imgAn f f-a-c">
							<img :src="item.clubImage" alt="" />
							{{ item.clubName }}
						</div>
					</div>
					<div class="industry">
						<div class="titles">Industry</div>
						<div class="count">{{ item.industryName }}</div>
					</div>
					<div class="tags">
						<div class="titles">Tags</div>
						<div class="tagsList f f-a-c f-w-w f-j-c">
							<div class="tagItem" v-for="(ite, ind) in item.tags" :key="ind">{{ ite }}</div>
							<!-- <div class="tagItem">Data</div>
							<div class="tagItem">Code review</div> -->
						</div>
					</div>
					<div class="fans">
						<div class="titles">Fans</div>
						<div class="qian">{{ item.fansNum }}</div>
					</div>
					<div class="Price">
						<div class="titles f f-a-c f-j-c">Price <img src="/src/assets/user/wen.png" alt="" /></div>
						<div class="qian">${{ item.subscription || "--" }}/Mo</div>
					</div>
				</div>
				<div class="rigBtn f f-a-c">
					<!-- <div @click="detile(item)" class="detele hand">Delete</div> -->
					<div @click="quitClub(item)" class="editHui hand">Joined</div>
				</div>
			</div>
		</div>
		<div v-if="ind == 2" class="Box m1280">
			<div v-for="(item, index) in listArt" :key="index" class="">
				<div style="margin-bottom: 16px; margin-top: 40px; color: #8590a1; font-size: 14px" class="">
					{{
						item[0] == "1月"
							? "jan"
							: item[0] == "2月"
							? "feb"
							: item[0] == "3月"
							? "mar"
							: item[0] == "4月"
							? "apr"
							: item[0] == "5月"
							? "may"
							: item[0] == "6月"
							? "jun"
							: item[0] == "7月"
							? "jul"
							: item[0] == "8月"
							? "aug"
							: item[0] == "9月"
							? "sep"
							: item[0] == "10月"
							? "oct"
							: item[0] == "11月"
							? "nov"
							: "dec"
					}}
				</div>
				<div class="itemBox">
					<div v-for="(ite, ind) in item[1]" :key="ind" class="leftItem f">
						<!--  -->
						<div style="width: 150px; margin-right: 80px" class="industry">
							<div class="titles">Title</div>
							<div class="count">{{ ite.title }}</div>
						</div>
						<div style="margin-left: 80px" class="industry">
							<div class="titles">Club</div>
							<div class="count">{{ ite.clubName }}</div>
						</div>
						<div style="margin: 0 80px" class="tags">
							<div class="titles">Tags</div>
							<div class="tagsList f f-a-c f-w-w f-j-c">
								<div class="tagItem" v-for="(its, ins) in ite.tags" :key="ins">{{ its }}</div>
								<!-- <div class="tagItem">Data</div>
								<div class="tagItem">Code review</div> -->
							</div>
						</div>
						<div class="Price">
							<div class="titles f f-a-c f-j-c">Price <img src="/src/assets/user/wen.png" alt="" /></div>
							<div class="qian">${{ ite.subscription || "0" }}/Mo</div>
						</div>
						<div @click="goPrint(ite)" class="Prices">
							<div class="titles f f-a-c f-j-c">Invoices</div>
							<div class="qian hand f f-a-c f-j-c">View <img src="/src/assets/xiazai.png" alt="" /></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<el-dialog v-model="filterVisible" title="" width="540px">
			<div class="filterTit">Filter</div>
			<div style="margin-bottom: 24px">
				<div class="titName">Date</div>
				<el-date-picker v-model="formFilter.dataTime" type="date" placeholder="Pick a day" size="large" />
			</div>
			<div style="margin-bottom: 24px">
				<div class="titName">Tags</div>
				<el-select v-model="formFilter.tags" size="large" multiple placeholder="Select" style="width: 100%">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</div>
			<div style="margin-bottom: 24px">
				<div class="titName">Price</div>
				<div class="priceNum f f-a-c f-j-b">
					<div class="pricMin f f-a-c f-j-b">
						<span class="name">MIN</span>
						<input type="text" v-model="formFilter.min" class="pricInp" ame="" id="" />
						<span class="daola">$</span>
					</div>
					<div>-</div>
					<div class="pricMin f f-a-c f-j-b">
						<span class="name">MAX</span>
						<input type="text" v-model="formFilter.max" class="pricInp" ame="" id="" />
						<span class="daola">$</span>
					</div>
				</div>
			</div>
			<div class="btnB f f-a-c f-j-b">
				<div @click="cler" class="clear hand">Clear all</div>
				<div class="apply hand">Apply</div>
			</div>
		</el-dialog>
		<el-dialog v-model="deteleVisible" title="" width="20%">
			<div class="deleteDloing">Quit the club？</div>
			<div class="countDing">Once you quit, you have to pay again to rejoin</div>
			<div class="doingBtn f f-a-c f-j-b">
				<div @click="deteleVisible = false" class="lefBtn hand">No</div>
				<div class="rigBtn hand">Yes</div>
			</div>
		</el-dialog>
		<div v-if="total" style="margin-top: 60px; margin-bottom: 80px" class="hand">
			<div class="example-pagination-block f f -a-c f-j-c">
				<el-pagination @size-change="sizeChange" :default-page-size="pageSize" @current-change="currentChange" layout="prev, pager, next" :total="total" />
			</div>
		</div>
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { ref, onMounted, reactive } from "vue";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import { MyClublsOne, MyArticleIsBoughtByTheSeller } from "@/api/knowClub/index.js";
	import { useRoute } from "vue-router";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import router from "@/router/index.js";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	let statusTab = ref(1);
	let ind = ref(1);
	let marking = ref("");
	let route = useRoute();
	let num = route.query.num || 1;
	let list = ref([]);
	let pageNum = ref(1);
	let total = ref(0);
	let pageSize = ref(5);
	let title = ref("");
	let tagIds = ref([]);
	let listArt = ref([]);
	let minPrice = ref("");
	let maxPrice = ref("");
	let dateSearch = ref("");
	let formFilter = reactive({
		dataTime: "",
		tags: [],
		min: "",
		max: ""
	});
	const options = [
		{
			value: "Option1",
			label: "Option1"
		},
		{
			value: "Option2",
			label: "Option2"
		},
		{
			value: "Option3",
			label: "Option3"
		},
		{
			value: "Option4",
			label: "Option4"
		},
		{
			value: "Option5",
			label: "Option5"
		}
	];
	let filterVisible = ref(false);

	let deteleVisible = ref(false);
	onMounted(() => {
		ind.value = num;
		if (ind.value == 1) {
			myList();
		} else if (ind.value == 2) {
			buyArtic();
		}
		// myList();
		window.addEventListener("scroll", handleScroll);
	});
	// 我创建的俱乐部列表
	const myList = async () => {
		let n = await MyClublsOne({ pageNum: pageNum.value, pageSize: pageSize.value });
		total.value = n.data.total;
		list.value = n.data.list;
	};
	// 这个是买家文章
	const buyArtic = async () => {
		let n = await MyArticleIsBoughtByTheSeller({
			pageNum: pageNum.value,
			pageSize: pageSize.value,
			title: title.value,
			tagIds: tagIds.value,
			minPrice: minPrice.value,
			maxPrice: maxPrice.value,
			dateSearch: dateSearch.value
		});
		handleArr(n.data.list);
	};
	// 切换
	const qiehuan = num => {
		ind.value = num;
		pageNum.value = 1;
		pageSize.value = 5;
		if (num == 1) {
			myList();
		} else if (num == 2) {
			buyArtic();
		}
	};
	// 处理数组函数
	const handleArr = data => {
		const result = data.reduce((acc, obj) => {
			const date = new Date(obj.createTime);
			const month = date.toLocaleString("default", { month: "short" });
			if (!acc[month]) {
				acc[month] = []; // 创建一个空数组
			}
			acc[month].push(obj);

			return acc;
		}, {});

		const resultArray = Object.entries(result).map(([key, value]) => {
			return [key, value];
		});
		listArt.value = resultArray;
		console.log(listArt, "listArt");
	};
	const quitClub = item => {
		console.log("1111");
		deteleVisible.value = true;
	};
	const cler = () => {
		console.log(formFilter.min);
		formFilter.min = "";
		formFilter.max = "";
		formFilter.tags = [];
		formFilter.dataTime = "";
	};
	const goPrint = item => {
		// console.log(item);
		// return;
		router.push({
			path: "/KcPrint",
			query: {
				id: item.orderId
			}
		});
	};
	const currentChange = e => {
		console.log(e, "222");
		pageNum.value = e;
		myList();
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
	::v-deep .el-pager li:hover {
		color: #000000 !important;
	}

	::v-deep .el-pager li.is-active {
		color: #000000 !important;
	}

	::v-deep .el-pagination button:hover {
		color: #000000 !important;
	}

	::v-deep .el-pager li {
		font-size: px(24) !important;
		margin: 0 8px;
	}

	::v-deep .el-pagination .btn-next .el-icon {
		font-size: 20px !important;
	}

	::v-deep .el-pagination .btn-prev .el-icon {
		font-size: 20px !important;
	}
</style>
